<template>
  <!-- 辖区管理 -- 新增/编辑 -->
  <div>
    <public-modal
      width="600px"
      :footer="false"
      :title="title"
      :publicVisible="publicVisible"
      @handleOk="handleOk"
      @cancel="cancel"
    >
      <div slot="content">
        <a-form-model
          :model="form"
          :rules="rules"
          ref="form"
          class="formStyle"
          autocomplete="off"
          layout="inline"
          :labelCol="{ style: 'width: 100px' }"
        >
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item label="城管姓名" prop="realname">
                <a-input :maxLength="30" autocomplete="off" placeholder="请填写城管姓名" v-model.trim="form.realname" />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item label="身份证号" prop="idCard">
                <a-input :maxLength="30" autocomplete="off" placeholder="请填写身份证号" v-model.trim="form.idCard" />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item label="手机号码" prop="mobile">
                <a-input :maxLength="30" autocomplete="off" placeholder="请填写手机号码" v-model.trim="form.mobile" />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <!-- :disabled="records && records.id" -->
              <a-form-model-item label="城管编号" prop="personNo">
                <div v-if="records && records.id" style="color: #04c8d4">{{ form.personNo }}</div>
                <a-input
                  v-else
                  :maxLength="30"
                  autocomplete="off"
                  placeholder="请填写城管编号"
                  v-model.trim="form.personNo"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </public-modal>
  </div>
</template>

<script>
import { personAdd, personEdit } from '@/api/person'
import publicModal from '@/components/publicModal'
import { checkIDCard } from '@/utils/validate.js'
export default {
  components: { publicModal },
  data() {
    let validateIdCard = (rule, value, callback) => {
      if (!value) {
        return callback()
      }
      let flag = checkIDCard(value)
      if (!flag) {
        return callback(new Error('请输入正确身份证号!'))
      }
      callback()
    }

    return {
      form: {},
      title: '',
      records: {},
      publicVisible: false,
      rules: {
        realname: [{ required: true, message: '请填写城管姓名' }],
        mobile: [
          { required: true, message: '请填写手机号码' },
          {
            pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/,
            message: '请输入正确手机号',
          },
        ],
        personNo: [
          { required: true, message: '请填写城管编号' },
          {
            pattern: /^[A-Za-z0-9]+$/,
            message: '只允许输入字母+数字的组合',
          },
        ],
        idCard: [{ required: true, validator: validateIdCard, trigger: 'change' }],
      },
    }
  },
  methods: {
    show(records) {
      this.records = records
      this.form = { ...records }
      if (records.id) {
        this.title = '编辑城管信息'
      } else {
        this.title = '新增城管信息'
      }
      this.publicVisible = true
    },

    handleOk() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        if (this.form.id) {
          personEdit(this.form).then((res) => {
            this.$message.success(res.message)
            this.cancel()
            this.$emit('refresh')
          })
        } else {
          personAdd(this.form).then((res) => {
            this.$message.success(res.message)
            this.cancel()
            this.$emit('refresh')
          })
        }
      })
    },

    cancel() {
      this.publicVisible = false
      this.form = {}
    },
  },
}
</script>

<style scoped lang="less"></style>
